<template>
    <div class="xm-home">
        <div class="second-router">
            <keep-alive
                :include="['XmArticle', 'XmLike', 'XmCollect']"
            >
                <router-view />
            </keep-alive>
            <!-- <router-view /> -->
        </div>
        <van-tabbar v-model="active" :change="activeChange">
            <van-tabbar-item icon="home-o" to="/home/article">
                面经
                <!-- <router-link to="/home/article">面经</router-link> -->
            </van-tabbar-item>
            <van-tabbar-item icon="search" to="/home/collect">
                收藏
                <!-- <router-link to="/home/collect">收藏</router-link> -->
            </van-tabbar-item>
            <van-tabbar-item icon="friends-o" to="/home/like">
                点赞
                <!-- <router-link to="/home/like">点赞</router-link> -->
            </van-tabbar-item>
            <van-tabbar-item icon="setting-o" to="/home/user">
                我的
                <!-- <router-link to="/home/user">我的</router-link> -->
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
import bus from '@/utils/bus'

export default {
  name: 'XmHome',
  data () {
    return {
      active: 0
    }
  },
  beforeCreate () {
    bus.$on('activeChange', (active) => {
      this.active = active
    })
  },
  methods: {
    activeChange (active) {
      this.active = active
    }
  }
}
</script>

<style lang="less" scoped>
.xm-home {
    width: 100%;
    height: 100%;

    .second-router {
        height: calc(100% - 50px);
        padding-bottom: 50px;
    }
}
</style>
